<template>
  <transition name="translate">
    <div class="identity-wrap">
      <common-back :content="headerTitle"
                   class="header"></common-back>
      <common-loading v-show="showLoading"></common-loading>
      <div class="identity-card"
           v-show="!showLoading">
        <div class="identity-card-left">
          <div class="identity-card-desc">
            <van-uploader :after-read="onRead"
                          accept="image/gif, image/jpeg, image/png"
                          multiple
                          :max-size="size">
              <div v-show="!isFront.length">
                <div class="identity-card-front">身份证正面</div>
                <p>点击上传</p>
              </div>
              <div class="img-wrap"
                   v-show="isFront.length"
                   aspectratio
                   w-345-244>
                <img :src="isFront"
                     alt=""
                     aspectratio-content>
              </div>
            </van-uploader>
          </div>
        </div>
        <div class="identity-card-right">
          <div class="identity-card-desc">
            <van-uploader :after-read="onReverseRead"
                          accept="image/gif, image/jpeg, image/png"
                          multiple
                          :max-size="size">
              <div v-show="!isReverse.length">
                <div class="identity-card-front">身份证正面</div>
                <p>点击上传</p>
              </div>
              <div class="img-wrap"
                   v-show="isReverse.length"
                   aspectratio
                   w-345-244>
                <img :src="isReverse"
                     alt=""
                     aspectratio-content>
              </div>
            </van-uploader>
          </div>
        </div>
      </div>
      <div class="form-list-wrap"
           v-show="!showLoading">
        <ul class="form-list">
          <li class="form-item"
              border-bottom-1px>
            <div class="form-title">姓名</div>
            <input type="text"
                   placeholder="请输入姓名"
                   class="form-input"
                   v-model="nameValue">
          </li>
          <li class="form-item"
              border-bottom-1px
              @click="handleShowGender">
            <div class="form-title">性别</div>
            <div class="form-input">{{gender}}</div>
            <i class="iconfont icon-xiangyou"></i>
          </li>
          <li class="form-item"
              border-bottom-1px>
            <div class="form-title">身份证号</div>
            <input type="text"
                   placeholder="请输入身份证号"
                   class="form-input"
                   v-model="idNumber">
          </li>
          <li class="form-item"
              border-bottom-1px>
            <div class="form-title">微信号</div>
            <input type="text"
                   placeholder="请输入微信号"
                   class="form-input"
                   v-model="wechatNumber">
          </li>
          <li class="form-item"
              border-bottom-1px>
            <div class="form-title">芝麻信用分</div>
            <input type="text"
                   placeholder="请输入芝麻信用分"
                   class="form-input"
                   v-model="credit">
          </li>
          <li class="form-item"
              border-bottom-1px
              @click="handleShowCity">
            <div class="form-title">城市</div>
            <div class="form-input">{{city}}</div>
            <i class="iconfont icon-xiangyou"></i>
          </li>
          <li class="form-item"
              border-bottom-1px>
            <div class="form-title">详细地址</div>
            <input type="text"
                   placeholder="街道/小区/门牌号等"
                   class="form-input"
                   v-model="address">
          </li>
          <li class="form-item"
              border-bottom-1px>
            <div class="form-title">公司名称</div>
            <input type="text"
                   placeholder="请输入公司名称"
                   class="form-input"
                   v-model="companyName">
          </li>
          <li class="form-item"
              border-bottom-1px>
            <div class="form-title">公司地址</div>
            <input type="text"
                   placeholder="请输入公司地址"
                   class="form-input"
                   v-model="companyAddress">
          </li>
        </ul>
      </div>
      <common-button :content="buttonTitle"
                     @submit="handleSubmit"
                     v-show="!showLoading"></common-button>
      <van-popup v-model="isgender"
                 position="bottom"
                 :overlay="true">
        <van-picker :columns="genderList"
                    @confirm="handleTimeConfirm"
                    @cancel="handleHide"
                    show-toolbar />
      </van-popup>
      <van-popup v-model="cityShow"
                 position="bottom">
        <van-area :area-list="areaList"
                  value="110101"
                  @confirm="handleFinish"
                  @cancel="handleHide" />
      </van-popup>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonButton from 'common/button/button'
import CommonLoading from 'common/loading/loading'
import areaList from '@/assets/js/city'
import { mapMutations } from 'vuex'
export default {
  name: 'identity',
  components: {
    CommonBack,
    CommonButton,
    CommonLoading
  },
  created () {
    this.areaList = areaList
    this.getId()
  },
  data () {
    return {
      headerTitle: '身份认证',
      buttonTitle: '下一步',
      isgender: false,
      genderList: ['男', '女'],
      gender: '男', // 性别
      cityShow: false,
      city: '', // 城市
      isFront: '',
      isReverse: '',
      nameValue: '', // 姓名
      idNumber: '', // 身份证号
      wechatNumber: '', // 微信号
      credit: '', // 芝麻信用
      address: '', // 地址
      companyName: '', // 公司姓名
      companyAddress: '', // 公司地址
      front: 0,
      province: '', // 省
      cityName: '', // 市
      area: '', // 区
      size: 2097152,
      showLoading: true,
      isFrontUrl: '',
      isReverseUrl: ''
    }
  },
  methods: {
    ...mapMutations({
      changePersonState: 'changePersonState'
    }),
    handleSubmit () {
      const flag = this.check()
      if (flag) {
        this.postAuthentication()
      }
    },
    postAuthentication () {
      this.$api.borrow.authentication(
        {
          real_name: this.nameValue,
          idcard_front: this.isFrontUrl,
          idcard_back: this.isReverseUrl,
          idcard_no: this.idNumber,
          wechat: this.wechatNumber,
          zmxy: this.credit,
          province: this.province,
          city: this.cityName,
          area: this.area,
          gender: this.gender,
          addr: this.address,
          company_name: this.companyName,
          company_addr: this.companyAddress
        }
      )
        .then(this.postAuthenticationSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    postAuthenticationSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$toast.success(res.msg)
        const person = 1
        this.changePersonState(person)
        this.$localStorage.set('person', person)
        this.$router.push({
          path: '/borrow/contacts'
        })
      } else if (res.code === this.$api.CODE_ERROR) {
        this.$toast.fail({
          duration: 1000,
          message: res.msg
        })
      }
    },
    handleShowGender () {
      this.isgender = true
    },
    handleTimeConfirm (value) {
      this.gender = value
      this.isgender = false
    },
    handleHide () {
      this.isgender = false
      this.cityShow = false
    },
    handleFinish (e) {
      const city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
      this.city = city
      this.province = e[0].name
      this.cityName = e[1].name
      this.area = e[2].name
      this.cityShow = false
    },
    handleShowCity () {
      this.cityShow = true
    },
    // 上传图片
    onRead (file) {
      console.log(file)
      this.isFront = file.content
      this.front = 0
      this.isFrontUpload(file.content)
    },
    onReverseRead (file) {
      this.isReverse = file.content
      this.front = 1
      this.isReverseUpLoad(file.content)
    },
    check () {
      const id = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      const wechat = /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/
      if (this.isFront.length === 0) {
        this.$toast({
          duration: 1000,
          message: '身份证正面照片不能为空'
        })
        return false
      }
      if (this.isReverse.length === 0) {
        this.$toast({
          duration: 1000,
          message: '身份证反面照片不能为空'
        })
        return false
      }
      if (this.nameValue === '') {
        this.$toast({
          duration: 1000,
          message: '姓名不能为空'
        })
        return false
      }
      if (!id.test(this.idNumber)) {
        this.$toast({
          duration: 1000,
          message: '身份证格式错误'
        })
        return false
      }
      if (!wechat.test(this.wechatNumber)) {
        this.$toast({
          duration: 1000,
          message: '微信号格式不正确'
        })
        return false
      }
      if (isNaN(Number(this.credit)) || this.credit === '') {
        this.$toast({
          duration: 1000,
          message: '芝麻信用只能为数字'
        })
        return false
      }
      if (this.city === '') {
        this.$toast({
          duration: 1000,
          message: '请选择城市'
        })
        return false
      }
      if (this.address === '') {
        this.$toast({
          duration: 1000,
          message: '家庭地址不能为空'
        })
        return false
      }
      if (this.companyName === '') {
        this.$toast({
          duration: 1000,
          message: '公司名称不能为空'
        })
        return false
      }
      if (this.companyAddress === '') {
        this.$toast({
          duration: 1000,
          message: '公司地址不能为空'
        })
        return false
      }
      return true
    },
    getId () {
      this.$api.borrow.getId()
        .then(this.getIdSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getIdSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.showLoading = false
        if (data.identity == null) {
          return false
        } else {
          this.nameValue = data.identity.real_name
          this.gender = data.identity.gender
          this.idNumber = data.identity.idcard_no
          this.wechatNumber = data.identity.wechat
          this.credit = data.identity.zmxy
          this.city = data.identity.province + data.identity.city + data.identity.area
          this.address = data.identity.address
          this.companyName = data.identity.company_name
          this.companyAddress = data.identity.company_addr
          this.isFront = data.identity.idcard_front
          this.isReverse = data.identity.idcard_back
          this.isFrontUrl = data.identity.idcard_front
          this.isReverseUrl = data.identity.idcard_back
        }
      }
    },
    upLoad (url) {
      this.$api.borrow.upLoad({ file: url })
        .then(this.upLoadSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    upLoadSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.$toast.clear()
        this.$toast.success('上传成功')
        console.log(res)
        if (this.front === 0) {
          this.isFront = data
          this.isFrontUrl = data
        } else {
          this.isReverse = data
          this.isReverseUrl = data
        }
      } else if (res.code === this.$api.CODE_ERROR) {
        if (this.front === 0) {
          this.isFront = ''
        } else {
          this.isReverse = ''
        }
        this.$toast.fail({
          duration: 1000,
          message: '上传失败'
        })
      }
    },
    isFrontUpload (url) {
      if (url.length > 0) {
        this.$toast.loading({
          duration: 0,
          mask: true,
          message: '上传中...'
        })
        this.upLoad(url)
      }
    },
    isReverseUpLoad (url) {
      if (url.length > 0) {
        this.$toast.loading({
          duration: 0,
          mask: true,
          message: '上传中...'
        })
        this.upLoad(url)
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.identity-card-desc>>>.van-uploader
  width 100%
  height 100%
  display flex
  justify-content center
  align-items center

.identity-wrap
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc_gray
  z-index 30
  overflow-y scroll
  padding()
  padding-bottom 80px
  padding-top 108px

.header
  z-index 20

.identity-card
  display flex
  justify-content space-between
  margin-bottom 20px

  .identity-card-left, .identity-card-right
    width 345px
    height 244px
    background rgba(255, 255, 255, 1)
    box-shadow 0px 5px 12px 0px rgba(47, 53, 66, 0.16)
    border-radius 24px
    position relative

    .identity-card-desc
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
      width 100%
      height 100%

      .identity-card-front
        font-size $address
        line-height 48px
        font-weight 400
        color #2F3542

      p
        font-size $common_fz
        line-height 44px
        font-weight 400
        color $icon_color
        text-align center

      .img-wrap
        width 100%

.form-list-wrap
  width 100%
  background-color $common_bgc
  padding-left 30px
  padding-right 30px
  box-sizing border-box
  border-radius 24px
  margin-bottom 64px

  .form-list
    width 100%

    .form-item
      height 100px
      display flex
      justify-content space-between
      align-items center

      .form-title, .form-input
        font-size $shop_name
        font-weight 400
        color $id_input

      .form-title
        text-align justify
        display inline-block
        width 160px
        height 100%
        line-height 110px

        &::after
          content ''
          display inline-block
          width 100%
          overflow hidden
          height 0

      .form-input
        flex 1
        height 100%
        border none
        text-align center
        padding-left 10px
        padding-right 10px
        box-sizing border-box
        background-color $common_bgc

      div.form-input
        line-height 110px
        text-align center
        width 420px
        ellipsis()

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
